import { IMOptionsType } from "@/types/dict";
import { IMTableType } from "@/types/table";
import { DrawerFormStateType, RechargeRuleFormType } from "./type";
export const tabPower = reactive([true, true]);
export const tableActiveKey = ref(0);
export const defaultColumns = reactive([
  [
    { title: getProxyT("base.index"), dataIndex: "index", key: "index" },
    {
      title: getProxyT("table126"),
      dataIndex: "order_number",
      key: "order_number",
    },
    {
      title: getProxyT("table0"),
      dataIndex: "user_info",
      key: "user_info",
    },
    {
      title: getProxyT("table2"),
      dataIndex: "phone_number",
      key: "phone_number",
    },
    {
      title: getProxyT("table134"),
      dataIndex: "order_status",
      key: "order_status",
    },
    { title: getProxyT("table175"), dataIndex: "amount", key: "amount" },
    {
      title: getProxyT("table176"),
      dataIndex: "actual_amount",
      key: "actual_amount",
    },
    {
      title: getProxyT("table137"),
      dataIndex: "pay_type",
      key: "pay_type",
    },
    {
      title: getProxyT("table177"),
      dataIndex: "pay_platform",
      key: "pay_platform",
    },
    {
      title: getProxyT("table135"),
      dataIndex: "create_time",
      key: "create_time",
      customRender: ({ text }: any) => getTimeByZone(text),
    },
    {
      title: getProxyT("table178"),
      dataIndex: "pay_time",
      key: "pay_time",
      customRender: ({ text }: any) => getTimeByZone(text),
    },
    {
      title: getProxyT("table172"),
      dataIndex: "third_order_number",
      key: "third_order_number",
    },
    { title: getProxyT("base.action"), key: "action" },
  ],
  [],
]);
export let columns = reactive<IMTableType[]>([
  ...defaultColumns[tableActiveKey.value],
]);
export const tabsOptions = computed(() =>
  ([] as IMOptionsType[])
    .concat(
      tabPower[0]
        ? {
            label: getProxyT("recharge10"),
            value: 0,
          }
        : []
    )
    .concat(
      tabPower[1]
        ? {
            label: getProxyT("recharge11"),
            value: 1,
          }
        : []
    )
);
export const searchPartyOptions = ref<any>([]);
export const searchPaymentMethodOptions = ref<any>([]);
export const orderStatusMap = reactive<any>([]);
export const searchOrderStateOptions = ref<any>(deepClone(orderStatusMap));
export const merchantOptions = ref<any>([]);
export const defaultSearchList = reactive([
  [
    {
      label: getProxyT("table126"),
      type: "input",
      model: "order_number",
      allowClear: true,
      placeholder: getProxyT("placeholder141"),
    },
    {
      label: getProxyT("table177"),
      type: "select",
      model: "pay_platform_id",
      placeholder: getProxyT("placeholder92"),
      options: searchPartyOptions,
      allowClear: true,
      searchClass: "search-item-width-200",
    },
    {
      label: getProxyT("table0"),
      type: "input",
      model: "buy_user",
      allowClear: true,
      placeholder: getProxyT("placeholder93"),
      searchClass: "search-item-width-250",
    },
    {
      label: getProxyT("table137"),
      type: "select",
      model: "pay_type",
      placeholder: getProxyT("placeholder94"),
      options: searchPaymentMethodOptions,
      allowClear: true,
      searchClass: "search-item-width-200",
    },

    {
      label: getProxyT("table134"),
      type: "select",
      model: "status",
      placeholder: getProxyT("placeholder110"),
      options: searchOrderStateOptions,
      allowClear: true,
      searchClass: "search-item-width-200",
    },

    {
      label: getProxyT("table135"),
      type: "rangePicker",
      model: "order_time",
      placeholder: computed(() => [$t("base.startTime"), $t("base.endTime")]),
      showTime: { format: "HH:mm" },
      format: "YYYY-MM-DD HH:mm",
    },

    {
      label: getProxyT("table178"),
      type: "rangePicker",
      model: "pay_time",
      placeholder: computed(() => [$t("base.startTime"), $t("base.endTime")]),
      showTime: { format: "HH:mm" },
      format: "YYYY-MM-DD HH:mm",
    },
  ],
  [],
]);
export const searchList = ref<any>(defaultSearchList[tableActiveKey.value]);
export const operateType = ref<any>("");
export const drawerInstance = ref<any>(null);
export const defaultFormState = reactive<DrawerFormStateType>([
  {
    order_number: undefined,
    order_status: undefined,
    pay_platform: undefined,
    create_time: undefined,
    pay_time: undefined,
    third_order_number: undefined,
    pay_type: undefined,
    user_info: {},
    amount: undefined,
    actual_amount: undefined,
    phone_number: undefined,
    source_type: undefined,
  },
  {
    id: undefined,
    name: undefined,
    is_wallet_amount_limit: 0,
    wallet_amount_limit: undefined,
    amount_list: [],
    is_recharge_amount_limit: 0,
    min_recharge_amount: 30,
    max_recharge_amount: undefined,
    comment: undefined,
  },
]);
export const drawerFormState = reactive<any>({});
export const resetFormState = (formState) => {
  const currentFormState = defaultFormState[tableActiveKey.value];
  initObjAttr(formState, currentFormState);
};
resetFormState(drawerFormState);
export const set_formState = (
  type: string,
  formState: any = {},
  data: any = {}
) => {
  resetFormState(formState);
  if (type === "view") {
    initObjAttr(formState, data);
  }
};
export const defaultVisible = toRefs(reactive([false, false]));
export const wrapRef = ref<any>(null);
export const reachargeRuleForm = reactive<RechargeRuleFormType<string, any>>({
  name: undefined,
  is_wallet_amount_limit: undefined,
  wallet_amount_limit: undefined,
  amount_list: undefined,
  is_recharge_amount_limit: 0,
  min_recharge_amount: undefined,
  max_recharge_amount: undefined,
  comment: undefined,
});
export const isDisplay = ref(false);
export const modalTitle = ref("");
export const queryParams = reactive<any>({});
export const winRef = ref<any>();
export const refreshComponent = ref(true);
export const drawer_disable_ok_button = computed(() => {
  if (operateType.value === "view") {
    return false;
  }

  if (
    drawerFormState.is_recharge_amount_limit === 0 &&
    drawerFormState.is_wallet_amount_limit === 0
  ) {
    return (
      isEmptyType(drawerFormState.name) ||
      isEmptyType(drawerFormState.amount_list)
    );
  }
  if (
    drawerFormState.is_recharge_amount_limit === 0 &&
    drawerFormState.is_wallet_amount_limit === 1
  ) {
    return (
      isEmptyType(drawerFormState.name) ||
      isEmptyType(drawerFormState.amount_list) ||
      isEmptyType(drawerFormState.wallet_amount_limit)
    );
  }

  if (
    drawerFormState.is_recharge_amount_limit === 1 &&
    drawerFormState.is_wallet_amount_limit === 0
  ) {
    return (
      isEmptyType(drawerFormState.name) ||
      isEmptyType(drawerFormState.amount_list) ||
      (isEmptyType(drawerFormState.min_recharge_amount) &&
        isEmptyType(drawerFormState.max_recharge_amount))
    );
  }
  return (
    isEmptyType(drawerFormState.name) ||
    isEmptyType(drawerFormState.amount_list) ||
    isEmptyType(drawerFormState.wallet_amount_limit) ||
    (isEmptyType(drawerFormState.min_recharge_amount) &&
      isEmptyType(drawerFormState.max_recharge_amount))
  );
});

export const colorOptions = reactive<any>({
  0: "s-ffc107",
  1: "s-52c41a",
  2: "s-dc3545",
  3: "s-888888",
  4: "s-ff0088",
  5: "s-ff0000",
});
export const userDetailLoading = ref(false);
export const defaultModalFormState = reactive([
  {},
  {
    temValue: undefined,
  },
]);
export const modal_disable_ok_button = ref(true);
export const drawerInputValidators = reactive(createArray(false, 5));
export const isChecked = reactive([false, false]);
watch([() => tabPower[0], () => tabPower[1]], (newArrayState) => {
  if (newArrayState.some((item) => item === true))
    initObjAttr(columns, defaultColumns[tableActiveKey.value]);
  if (newArrayState.every((item) => item === false)) initObjAttr(columns, []);
});
